<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    :back="!isShare"
    title="求职神器"
    :show-top="showTop"
    :dark="loaded ? false : true"
    :hideSafeArea="true"
    :bg-color="dynamicColor"
  >
    <template slot="title">
      <view class="title-container">
        <view
          class="left-arrow"
          v-if="isShare"
          @click="handleGotoZhiTuPage"
        ></view>
        <!-- <span class="return-index" v-if="isShare" @click="handleGotoZhiTuPage">返回首页</span> -->
        <span>求职神器</span>
      </view>
    </template>
    <view class="buy-page">
      <scroll-view class="container" scroll-y="true" @scroll="myPageScroll">
        <view class="sale-introcution-first"></view>
        <view class="sale-introcution-second"></view>
        <view class="sale-introcution-third"></view>
        <view class="sale-introcution-fourth" v-if="channelType == 82"></view>
        <view class="sale-introcution-fourth-nostepfour" v-else></view>
      </scroll-view>
      <view class="operation">
        <view class="right-button-solo" @click="showMore">
          <span style="margin-left: 35%">立即购买</span>
        </view>
      </view>
      <u-popup
        class="popup-info"
        v-if="showPopup"
        v-model="showPopup"
        :closeable="false"
        mode="bottom"
        border-radius="14"
        width="100%"
        height="80%"
      >
        <view class="title">
          <view>选择服务项</view>
          <view class="close-button" @click="showPopup = false"></view>
        </view>
        <scroll-view scroll-y="true" class="choose-service">
          <view class="shop" v-for="(obj, index) in shopList" :key="index">
            <view class="shop-name" @click="addOrRemoveOneService(obj, index)">
              <view
                class="choose-button"
                v-if="obj.isChoosen == false"
                style="margin-top: 0rpx"
              ></view>
              <view class="choose-sth" style="margin-top: 0rpx" v-else></view>
              {{ obj.groupName }}
            </view>
            <view class="discount-content">
              <view class="discounts">特惠</view>
              <view class="discount-name"
                >购买以下 3 项全部服务，享受
                8.5折，本次活动『优惠价格』仅限活动期间</view
              >
            </view>
            <view
              v-for="(item, _index) in obj.productList[0].rightList"
              :key="_index"
              class="service-item"
            >
              <!-- <view class="choose-button" v-if="item.isChoosen == false"></view>
                            <view class="choose-sth" v-else></view> -->
              <view style="width: 50rpx; height: 40rpx"></view>
              <view class="right-card">
                <img class="service-picture" :src="item.rightImg" />
                <view class="right-info">
                  <view class="service-name">{{ item.rightName }}</view>
                  <text class="service-desc">{{ item.rightRemark }}</text>
                  <view class="special-desc" v-if="item.rightName == '职途报告'"
                    >需要搭配其它工具，才可使用</view
                  >
                  <view class="service-price"
                    ><span style="font-size: 20rpx; margin-top: 10rpx">￥</span
                    ><span
                      style="
                        font-family: 'D-DIN-PRO-700-Bold';
                        font-size: 44rpx;
                      "
                      >{{ item.price }}</span
                    >
                    <view class="old-price"
                      >原价 <span>￥{{ item.originPrice }}</span>
                      <view class="line"></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="shopping-operation">
          <view class="left">
            <view class="shopping-cart">
              <view class="chosen"
                >已选<span>{{ chosenNum > 0 ? 1 : 0 }}</span
                >个</view
              >
              <view class="price">
                <view
                  >合计：<span
                    ><span style="font-size: 24rpx">￥</span
                    >{{ showPrice }}</span
                  ></view
                >
                <!-- <view class="discount-price" v-if="discountPrice != 0">共优惠￥{{ discountPrice }}</view> -->
              </view>
            </view>
            <view class="discount" v-if="discountPrice != 0"
              >共优惠￥{{ discountPrice }}
              <span v-if="channelType == 82" style="margin-left: 10rpx">
                已使用优惠券￥20</span
              ></view
            >
          </view>
          <view class="right-button" @click="gotoPay">
            <span style="margin-left: 20rpx">立即购买</span>
          </view>
        </view>
      </u-popup>
      <u-popup
        class="service-detail"
        v-if="showServiceDetail"
        v-model="showServiceDetail"
        :closeable="false"
        mode="bottom"
        border-radius="14"
        width="100%"
        height="70%"
      >
        <view class="top">
          <view class="top-left">
            <view class="left-arrow" @click="toShop"></view>
            <view class="title"
              >{{ shopList[currentShopListIndex].groupName }}说明</view
            >
          </view>
          <view class="close-button" @click="showServiceDetail = false"></view>
        </view>
        <scroll-view scroll-y="true" class="more-detail">
          <view class="service">
            <view class="title"
              >{{ shopList[currentShopListIndex].groupName }}项</view
            >
            <view
              v-for="(item, index) in shopList[0].productList"
              class="service-card"
              :key="index"
            >
              <view class="header">
                <view class="name">{{ item.productName }}</view>
                <view class="price"
                  ><span style="font-size: 24rpx">￥</span
                  >{{ item.price }}</view
                >
              </view>
              <view class="footer">{{ item.productDesc }}</view>
            </view>
          </view>
          <view class="complimentary-detail">
            <view class="title">赠送细则</view>
            <view class="complimentary-text">
              <text class="shop-desc">
                针对顾问1对1服务项（简历优化/面试辅导），购买其中<text
                  style="color: #ff711e; margin: 0 10rpx"
                  >1</text
                >项，赠送职业测评、职业报告、AI简历诊断。购买<text
                  style="color: #ff711e; margin: 0 10rpx"
                  >2</text
                >项服务，包含以上赠送内容，加赠AI面评、订阅服务
                <!-- 购买<span>{{ index + 1 }}</span
                    >项服务,{{ index == 0 ? "赠送" : "包含以上服务，加赠"
                    }}{{ desc.services }} -->
              </text>
            </view>
          </view>
          <view
            class="other-service"
            v-for="(item, index) in serviceList"
            :key="index"
          >
            <view class="title">{{ item.rightName }}</view>
            <!-- <view class="desc" v-for="_item in item.detail">{{ _item }}</view> -->
            <!-- <view class="desc">{{ item.rightRemark }}</view> -->
            <view
              class="desc"
              v-for="(ele, _index) in item.rightRemark.split('|')"
              :key="_index"
              >{{ ele }}
            </view>
          </view>
        </scroll-view>
      </u-popup>
    </view>
    <u-modal
      v-model="showTips"
      :content="tipContent"
      width="70%"
      show-cancel-button
      @confirm="handleConfirmTips"
      @cancel="showTips = false"
    ></u-modal>
    <!-- 这个tarPath是用于新用户通过海报扫码进来营销页面注册完成后跳转到的路径 -->
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import { env } from '@/api/root.js';
import {
  addCartAndToOrder,
  addZhituPayOrder,
  getProductGroup,
  getUserInfo,
  cardRegist,
  getProductGroupLadderInfo,
  addBuryingPoint,
  getGroupDiscountList,
  getPersonOrDefaultCardType
} from '@/api/modules/career';
import share from '@/mixins/share';
import LoginDialog from '@/components/LoginDialog';
export default {
  // mixins: [share],
  components: { LoginDialog },
  data() {
    return {
      groupId: '', //用于折扣的groupId
      discontList: [], // 折扣列表
      showPrice: 0,
      showMoreProduct: false,
      scene: 0,
      etId: 10007, // 10001代表停留 10002代表分享(写在share.js里) 10003代表点击分享链接 10004代表线下扫码 10005代表长按识别
      isBuyPageBuryingPoint: true, // 混入的武汉购买页分享的变量
      // statType: null, // 判断用户埋点类型
      originFrom: '',
      buryingPointId: '',
      cardType: '',
      dynamicTitle: '',
      showTop: false,
      dynamicColor: 'transparent',
      productSign: '', // 项目类型标识
      isShare: true,
      sharePath: `/pagesSub/userCenter/careerPathV2/components/CBuyPage?${this.shareQuery}`,
      shareTitle: '在找工作吗？职途顾问服务手把手带你掌握求职秘诀！',
      shareQuery: `cardTypeEncrypt=${this.cardKey}&isConsultant=` + 'false',
      consultantId: '',
      currentShopListIndex: 0, // shopList点进去第几项
      navHeight: getApp().globalData.navHeight,
      provider: {},
      mallProductId: '',
      rightProductId: '',
      showPopup: false, // 控制弹出层显示隐藏
      showServiceDetail: false, // 控制服务详情弹出层显示隐藏
      chosenNum: 0, // 已选服务数量
      sumPrice: 0, // 计算得总价
      discountPrice: 0, // 优惠的金额
      shopList: [],
      serviceList: [], // 具体赠送服务
      cardKey: '', // 卡类型秘文
      groupName: '', // 当前服务名称
      isConsultant: false,
      showTips: false,
      openPopup: false,
      opt: {},
      targetPath: '', // 经过扫码进来的传过来的需要跳转的目标路径，作为备用
      cardNo: '',
      personId: uni.getStorageSync('person-id').slice(2) || '',
      tipContent: '您已经是职途的用户，是否直接跳转到职途主页？',
      cardVersion: 2,
      experienceMore: false,
      imageUrl: 'https://img3.job1001.com/ypMp/elan/images/tu.jpg',
      ZHI_TU_PAGE: '/pagesSub/userCenter/careerPathV2/index',
      ZHI_TU_PAGE_V1: '/pagesSub/userCenter/careerPath/index',
      WU_HAN_PAGE: '/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage',
      C_PAGE: '/pagesSub/userCenter/careerPathV2/components/CBuyPage',
      GZ_PAGE: '/pagesSub/userCenter/careerPathV2/components/GZBuyPage',
      targetPath: '',
      originGZ: false, //判断是不是贵州来源
      jumpPersonId: '', // 来源用户id
      jumpSource: 10, // 跳转来源类型
      sourceType: 0, // 来源类型
      channelType: 80, // channelType：82 购买贵州工具套餐 （传groupId），内部一览小程序传80（不需要传groupId）
      ladderUnlockRight: '',
      myOriginPrice: 0,
      myPrice: 0
    };
  },
  onLoad(opt) {
    console.log('opt', opt);
    this.showPrice = 0;
    this.targetPath = opt.targetPath || '';
    this.imageUrl = 'https://img3.job1001.com/ypMp/elan/images/tu.jpg';
    // 获取从填写姓名和手机号的页面传过来的参数来决定是否自动打开 popup
    this.openPopup = opt.openPopup || false;
    if (opt.originGZ) {
      this.originGZ = true;
      this.etId = 10013;
      this.channelType = 82;
      switch (opt.originGZ) {
        // 11就是来自贵州小程序
        case 11:
          this.sourceType = 11;
          break;
        // 40就是来自菜单栏
        case 40:
          this.sourceType = 40;
          break;
        // 41就是来自公众号文章
        case 41:
          this.sourceType = 41;
          this.jumpSource = 40;
          break;
        default:
          break;
      }
    } else {
      this.originGZ = false;
      this.etId = 10007;
    }
    if (this.openPopup) {
      this.getProductGroupFn();
      this.showPopup = true;
      this.chosenNum = 0;
      this.sumPrice = 0;
      this.discountPrice = 0;
    }
    if (opt.fromApp == '1') {
      this.showMore();
    }
    // 这个是从ConsultantShare页面传过来获取参数的逻辑
    // 这里是内部聊天分享逻辑
    if (opt.cardType) {
      this.cardKey = opt.cardTypeEncrypt;
      this.cardType = opt.cardType;
      this.consultantId = opt.consultantId;
      this.isConsultant = opt.isConsultant ? true : false;
      this.showMoreProduct = opt.isConsultant ? false : true;
      this.isShare = opt.isShare ? true : false;
    } else {
      // this.isShare = false;
      // if (env == "test") {
      //     this.cardType = 54;
      //     uni.setStorageSync("cardType", 54);
      // } else if (env == "pro") {
      //     this.cardType = 28;
      //     uni.setStorageSync("cardType", 28);
      // }
    }
    // 这个是从海报二维码跳转过来获取参数的逻辑
    // 这里无论是链接还是扫码都在下面
    // 此处开始是二维码逻辑
    let paramStr = decodeURIComponent(opt.q).split('?');
    console.log(
      'Array.isArray(paramStr) && paramStr.length > 1',
      Array.isArray(paramStr) && paramStr.length > 1
    );
    if (Array.isArray(paramStr) && paramStr.length > 1) {
      this.showMoreProduct = true;
      this.targetPath = paramStr[0];
      let str1 = decodeURIComponent(paramStr[1]);
      let str2 = str1.replace(/\\&quot;/g, '"');
      const index = str2.indexOf('&');
      const queryObj = JSON.parse(str2.slice(6, index));
      if (queryObj.t) {
        this.cardKey = queryObj.k || '';
        this.cardType = queryObj.t; // cardType
        this.consultantId = queryObj.d; // consultantId
        this.isShare = queryObj.i; // isShare
        this.isConsultant = false;
      } else {
        this.cardKey = queryObj.cardTypeEncrypt;
        this.cardType = queryObj.cardType;
        this.consultantId = queryObj.consultantId;
        this.isShare = queryObj.isShare;
        this.isConsultant = false;
      }
    }
    if (opt.consultantId) {
      // 如果参数里有consultantId说明是顾问分享出来的 就进入10003判断
      console.log('这里是进入到了10003');
      // this.etId = 10003;
      this.originFrom = 'shareLink';
      if (this.originGZ) {
        this.addBuryingPointFn(10015);
      } else {
        this.addBuryingPointFn(10009);
      }
      this.cardType = opt.cardType; // 这里带上cardType 项目的cardType是多少这里就是多少
      this.showMoreProduct = true;
    }

    // 兜底用，不要改，哎
    if (!this.cardType || this.cardType == 'undefined') {
      if (env == 'test') {
        this.cardType = 54;
        uni.setStorageSync('cardType', 54);
      } else if (env == 'pro') {
        this.cardType = 28;
        uni.setStorageSync('cardType', 28);
      }
    }

    //从小程序跳转过来的情况是没有cardType的 所以要在这里加一个,q2c端的两个环境卡号不一样
    this.cardType && uni.setStorageSync('cardType', this.cardType);
    this.cardKey && uni.setStorageSync('cardKey', this.cardKey);
    this.consultantId && uni.setStorageSync('sellId', this.consultantId);
    this.shareQuery = `cardType=${opt.cardType}&cardTypeEncrypt=${
      this.cardKey
    }&consultantId=${uni.getStorageSync('person-id').slice(2)}`;
    this.sharePath = `${this.GZ_PAGE}?${this.shareQuery}`;
    console.log('onload', this.cardType);
  },
  onShow() {
    // '1011': '扫描二维码',
    // '1012': '长按图片识别二维码',
    // '1013': '扫描手机相册中选取的二维码',
    const launchOptions = uni.getLaunchOptionsSync();
    console.log('场景值:', launchOptions.scene);
    this.scene = launchOptions.scene;
    // 关于埋点接口的执行
    // 这里一共进行两次埋点操作，由后端来执行判断两次埋点的时间间隔来计算页面停留时间
    // 第一次埋点后端返回一个id 第二次埋点把这个id作为参数
    // 由于微信小程序可以切换到后台所以这里逻辑要做两种判断
    // 两种情况我们都要在onShow中进行第一次埋点
    // 1.如果切换到后台，此时进入onHide周期我们进行第二次埋点
    // 2.如果离开这个页面，或者杀死小程序，就进入onUnload周期，我们进行第二次埋点
    this.buryingPointId = '';
    switch (launchOptions.scene) {
      // 根据场景值来区分用户是如何到这个页面的
      case 1011:
        // this.etId = 10004;
        if (this.originGZ) {
          this.addBuryingPointFn(10016);
        } else {
          this.addBuryingPointFn(10010);
        }
        // this.addBuryingPointFn(10004);
        break;
      case 1012:
        // this.etId = 10005;
        if (this.originGZ) {
          this.addBuryingPointFn(10017);
        } else {
          this.addBuryingPointFn(10011);
        }
        // this.addBuryingPointFn(10005);
        break;
      default:
        // this.etId = 10001;
        // this.addBuryingPointFn(10001);
        break;
    }
    // this.etId = 10006; // 埋点统计访问次数
    // this.addBuryingPointFn(10006);
    if (this.originGZ) {
      this.addBuryingPointFn(10018);
    } else {
      this.addBuryingPointFn(10012);
    }

    // this.etId = 10001; // 埋点统计时长
    if (this.originGZ) {
      this.addBuryingPointFn(10013);
    } else {
      this.addBuryingPointFn(10007);
    }
  },
  created() {
    //获取支付提供商
    uni.getProvider({
      service: 'payment',
      success: (res) => {
        this.provider = res.provider;
      }
    });
  },
  onHide() {
    console.log('这里进入了onHide周期');
    this.$refs.loginDialog.setVisibility(false);
    if (this.originGZ) {
      this.addBuryingPointFn(10013);
    } else {
      this.addBuryingPointFn(10007);
    }
    // this.addBuryingPointFn(10001);
  },
  onUnload() {
    console.log('这里进入了onUnload周期');
    if (this.originGZ) {
      this.addBuryingPointFn(10013);
    } else {
      this.addBuryingPointFn(10007);
    }
    // this.addBuryingPointFn(10001);
  },
  mounted() {},
  methods: {
    async getGroupDiscountListFn() {
      const params = {
        groupId: this.groupId
      };
      const res = await getGroupDiscountList(params);
      if (res.code == 200) {
        console.log('res', res);
        this.discontList = res.data;
      }
    },
    async addBuryingPointFn(etId) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : '',
        personId: uni.getStorageSync('person-id').slice(2) || '',
        cardType: this.cardType || uni.getStorageSync('cardType') || '',
        consultantId: uni.getStorageSync('sellId')
          ? uni.getStorageSync('sellId')
          : '',
        // statType: this.statType ? this.statType : null,
        originType: this.originFrom == 'shareLink' ? 10 : 20,
        jumpPersonId:
          this.jumpPersonId || uni.getStorageSync('person-id').slice(2),
        jumpSource: this.jumpSource,
        sourceType: this.sourceType
      };
      const res = await addBuryingPoint(params);
      if (res.code == 200) {
        if (res.data.id) {
          if (this.originGZ) {
            if (etId == 10013) this.buryingPointId = res.data.id;
          } else {
            if (etId == 10007) this.buryingPointId = res.data.id;
          }
          // if (etId == 10001) this.buryingPointId = res.data.id;
        }
      }
    },
    handleConfirmTips() {
      this.showTips = false;
      if (this.cardVersion == 2) {
        uni.navigateTo({
          url: this.ZHI_TU_PAGE
        });
      } else {
        uni.navigateTo({
          url: this.ZHI_TU_PAGE_V1
        });
      }
    },
    myPageScroll(e) {
      //滚动改变颜色
      this.showTop = e.target.scrollTop >= 60;
      if (this.showTop) {
        this.dynamicColor = '#ffffff';
      } else {
        this.dynamicTitle = '';
        this.dynamicColor = 'transparent';
      }
    },
    handleGotoZhiTuPage() {
      uni.navigateTo({
        url: this.ZHI_TU_PAGE
      });
    },
    loginSuccessBack() {
      // 是否是去体验更多
      if (this.experienceMore) {
        this.getUserInfoFn(this.ZHI_TU_PAGE);
      } else {
        // 判断是不是顾问角色
        if (this.isConsultant) {
          this.getProductGroupFn();
          this.showPopup = true;
          this.chosenNum = 0;
          this.sumPrice = 0;
          this.discountPrice = 0;
        } else {
          console.log('登录之后进入到这个分支');
          this.getUserInfoFn(this.GZ_PAGE);
        }
      }
    },
    async getProductGroupLadderInfoFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        id: this.shopList[this.currentShopListIndex].id
      };
      const res = await getProductGroupLadderInfo(params);
      if (res.code == 200) {
        let tempService = [];
        res.data.forEach((item) => {
          item.rightList.forEach((_item) => {
            tempService.push(_item);
          });
        });
        this.serviceList = tempService;
      }
    },
    async getPersonOrDefaultCardTypeFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2) || undefined
      };
      const res = await getPersonOrDefaultCardType(params);
      if (res.code == 200 && res.data.cardType) {
        uni.setStorageSync('cardType', res.data.cardType);
      }
    },
    async cardRegistFn() {
      const params = {
        sellId: +this.consultantId
      };
      if (this.cardKey && this.cardKey != 'undefined') {
        params.cardKey = this.cardKey;
      } else {
        params.cardType = this.cardType;
      }
      const res = await cardRegist(params);
      if (res.code != 200) {
        uni.showToast({ icon: 'none', title: res.status_desc, duration: 1500 });
      }
    },
    async getUserInfoFn(targetPath) {
      const params = { uid: '' };
      const res = await getUserInfo(params);
      if (res.code == 200) {
        // cardNoe和cardType是同时存在的
        if (!res.data.cardType) {
          await this.getPersonOrDefaultCardTypeFn();
          // 说明此时没有绑卡 要自动绑定q2c端的卡
          await this.cardRegistFn();
          //然后手动调用一下 否则要点两次
          this.showMore();
        } else {
          await this.getPersonOrDefaultCardTypeFn();
          // 如果之前就有职途卡号，就对比一下是否相同，不相同的话要跳到职途主页
          if (uni.getStorageSync('cardType') != res.data.cardType) {
            this.cardVersion = res.data.cardVersion;
            this.showTips = true;
          } else {
            if (this.experienceMore) {
              this.handleGotoZhiTuPage();
            } else {
              // this.showPopup = true;
              this.chosenNum = 0;
              this.sumPrice = 0;
              this.discountPrice = 0;
              await this.getProductGroupFn();
            }
          }
        }
      }
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    async getProductGroupFn() {
      const params = {
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        id: '1',
        unlockTypeList: [40],
        productSignList: ['JOB_TOOL_SERVICE']
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
        if (
          res.data[0].productList == null ||
          res.data[0].productList[0].isFree == 1
        ) {
          uni.showToast({
            icon: 'none',
            title: '你当前已拥有职途卡',
            duration: 1000
          });
          setTimeout(() => {
            uni.redirectTo({
              url: '/pagesSub/userCenter/careerPathV2/index'
            });
          }, 1500);
        } else {
          this.productSign = res.data[0].productSign;
          this.groupId = res.data[0].id;
          if (res.data[0].ladderUnlockRight) {
            this.ladderUnlockRight = res.data[0].ladderUnlockRight;
            this.ladderUnlockRight = JSON.parse(this.ladderUnlockRight);
            // console.log('this.ladderUnlockRight', this.ladderUnlockRight);
          }
          this.myPrice = res.data[0].productList[0].price;
          this.originPrice = res.data[0].productList[0].originPrice;
          this.getGroupDiscountListFn();
          // if (this.productSign != "ZHITU_TOC_SERVICE") {
          //     uni.navigateTo({
          //         url: this.ZHI_TU_PAGE,
          //     });
          // }
          this.shopList = res.data;
          this.showPopup = true;
          console.log('this.shopList', this.shopList);
          this.shopList.forEach((item) => {
            item.isChoosen = false;
            if (item.productList) {
              item.productList.forEach((_item) => {
                _item.isChoosen = false;
              });
            }
            if (item.ladderUnlockRightJson) {
              item.ladderUnlockRightJson.forEach((ele) => {
                ele.services = '';
                if (ele.rightList) {
                  ele.rightList.forEach((_ele) => {
                    if (ele.services != '') {
                      ele.services = ele.services + ',' + _ele.rightName;
                    } else {
                      ele.services = _ele.rightName;
                    }
                  });
                }
              });
            }
          });
          this.addOrRemoveOneService(this.shopList[0], 0);
        }
      } else {
        this.showTips = true;
      }
    },
    toShop() {
      this.showServiceDetail = false;
      this.showPopup = true;
    },
    addOneService(item, index) {
      item.isChoosen = true;
      // 判断是一级还是二级
      if (item.productList) {
        item.productList.forEach((element) => {
          // 如果是false才要加钱 否则会重复计算
          if (element.isChoosen == false) {
            this.sumPrice += element.price;
            this.chosenNum += 1;
            this.discountPrice += element.originPrice - element.price;
            element.isChoosen = true;
          }
        });
      } else {
        this.sumPrice += item.price;
        this.discountPrice += item.originPrice - item.price;
        this.chosenNum += 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
    cancelOneService(item, index) {
      item.isChoosen = false;

      // 判断是一级还是二级
      if (item.productList) {
        item.productList.forEach((element) => {
          if (element.isChoosen == true) {
            this.sumPrice -= element.price;
            this.discountPrice -= element.originPrice - element.price;

            this.chosenNum -= 1;
            element.isChoosen = false;
          }
        });
      } else {
        this.sumPrice -= item.price;
        this.discountPrice -= item.originPrice - item.price;
        this.chosenNum -= 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
    addOrRemoveOneService(item, index) {
      if (item.isChoosen == false) {
        this.addOneService(item, index);
      } else {
        this.cancelOneService(item, index);
      }
      if (this.chosenNum > 0) {
        // this.showPrice = this.originPrice - this.myPrice * this.ladderUnlockRight[0].discount;
        // this.showPrice = this.showPrice.toFixed(2);
        this.showPrice =
          this.channelType == 82
            ? this.myPrice * this.ladderUnlockRight[0].discount
            : this.myPrice;
        this.showPrice = this.showPrice.toFixed(0);
        this.discountPrice = this.originPrice - this.showPrice;
        this.discountPrice = this.discountPrice.toFixed(0);
      } else {
        this.showPrice = 0;
      }
    },
    handleMoreProduct() {
      this.experienceMore = true;
      // 如果用户没有登录就跳转到登录页面去
      this.personId = uni.getStorageSync('person-id').slice(2) || '';
      // 先判断是否登录
      if (!this.personId) {
        // 在这个地方，登录成功后会在loginSuccessBack这回调里面请求用户数据
        this.showLoginDialog();
      } else {
        this.getUserInfoFn(this.ZHI_TU_PAGE);
      }
    },
    showMore() {
      this.showPrice = 0;
      this.experienceMore = false;
      // 如果用户没有登录就跳转到登录页面去
      this.personId = uni.getStorageSync('person-id').slice(2) || '';
      // 先判断是否登录
      if (!this.personId) {
        // 在这个地方，登录成功后会在loginSuccessBack这回调里面请求用户数据
        uni.setStorageSync('isZhituUser', true); //职途用户标识（注册的时候传regSource用
        this.showLoginDialog();
        return;
      }
      if (this.isConsultant) {
        this.getProductGroupFn();
        this.showPopup = true;
        this.choosenNum = 0;
        this.sumPrice = 0;
        this.discountPrice = 0;
        console.log('这里进入if分支');
      } else {
        this.getPersonOrDefaultCardTypeFn();
        console.log('这里进入了else分支');
        this.getUserInfoFn(this.GZ_PAGE);
      }
    },
    gotoServiceDetail(index) {
      this.showPopup = false;
      this.showServiceDetail = true;
      this.currentShopListIndex = index;
      this.getProductGroupLadderInfoFn();
    },
    gotoPay() {
      if (this.chosenNum > 0) {
        this.shopList.forEach((item) => {
          if (item.productList) {
            item.productList.forEach((_item) => {
              if (_item.isChoosen == true) {
                if (this.mallProductId !== '') {
                  this.mallProductId =
                    this.mallProductId + ',' + _item.mallProductId;
                } else {
                  this.mallProductId = _item.mallProductId;
                }
                if (this.rightProductId !== '') {
                  this.rightProductId = this.rightProductId + ',' + _item.id;
                } else {
                  this.rightProductId = _item.id;
                }
              }
            });
          }
        });
        this.addCartAndToOrder();
      } else {
        console.log('没有选择商品');
      }
    },
    //1.生成订单
    async addCartAndToOrder() {
      uni.showLoading({
        title: '生成订单中...',
        mask: true
      });
      const params = {
        orderType: 'ZT_SERVICE',
        mallProductId: this.mallProductId, // 这个等着后端返回
        channelType: this.channelType,
        sourceType: 3,
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        cardType: uni.getStorageSync('cardType'),
        orderCondition: {
          rightProductId: this.rightProductId, // 等着后端返回
          groupId: this.channelType == 82 ? this.groupId : ''
        }
      };
      const res = await addCartAndToOrder(params);
      if (res.code == 200) {
        this.rightProductId = '';
        this.mallProductId = '';
        console.log('resaddCartAndToOrder');
        this.addZhituPayOrder(res.data);
      } else {
        this.rightProductId = '';
        this.mallProductId = '';
        uni.hideLoading();
        uni.showToast({
          title: res.status_desc || '生成订单失败',
          icon: 'none',
          duration: 2000
        });
      }
    },
    //2.通过订单获取支付信息
    async addZhituPayOrder(data) {
      const params = {
        ...data,
        orderType: 'ZT_SERVICE',
        wayCode: 'WX_LITE',
        personId: uni.getStorageSync('person-id').slice(2) || undefined,
        personName: uni.getStorageSync('personName'),
        openid: uni.getStorageSync('openid')
      };
      const res = await addZhituPayOrder(params);
      if (res.code == 200) {
        this.requestPayment(res.data);
      } else {
        uni.hideLoading();
        uni.showToast({
          title: res.status_desc || '获取商品信息失败',
          icon: 'none',
          duration: 2000
        });
      }
    },
    //3.使用支付信息调用支付
    requestPayment(data) {
      uni.hideLoading();
      if (this.provider.indexOf('wxpay') < 0) {
        return;
      }

      const payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: (res) => {
          console.log('支付成功');
          uni.setStorageSync('edition-Type', 10);
          uni.setStorageSync('isBuy', 1);
          // this.handlePaySuccess(res);
          // uni.navigateTo({
          //     url: `/pagesSub/userCenter/careerPathV2/components/zhituPayFinish?mallOrderId=${data.orderId}&targetPath=${this.targetPath}`,
          // });
          uni.redirectTo({
            url: `/pagesSub/careerNew/zhituPaytoC/paySuccess?rightId=${this.rightId}&cardType=${this.cardType}`
          });
        },
        fail: (err) => {
          console.log('支付失败');
          uni.showToast({
            title: '支付失败,请您重新支付',
            icon: 'none',
            duration: 3000
          });
          // uni.navigateTo({
          //   url:
          //     `/pagesSub/userCenter/careerPathV2/components/PayFinish?isFailed=` +
          //     true,
          // });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + 'careerPath/';

@font-face {
  font-family: 'D-DIN-PRO-700-Bold';
  /*定义字体名称*/
  src: url('https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf');
}

.title-container {
  display: flex;
  flex-direction: row;

  .return-index {
    position: absolute;
    left: 70rpx;
  }

  .left-arrow {
    position: absolute;
    left: 36rpx;
    top: 30rpx;
    width: 40rpx;
    height: 40rpx;
    color: #000000;
    background-image: url($img-base + 'career/arrow-left-wuhan.png?v=1');
    background-size: 100% 100%;
  }
}

.buy-page {
  width: 100%;

  .container {
    height: 90vh;

    .sale-introcution-first {
      height: 2030rpx;
      background-image: url($img-base-person + 'GZBuyPageBackground0.png');
      background-size: 100%;
    }

    .sale-introcution-second {
      height: 2030rpx;
      background-image: url($img-base-person + 'GZBuyPageBackground1.png');
      background-size: 100%;
    }

    .sale-introcution-third {
      height: 2030rpx;
      background-image: url($img-base-person + 'GZBuyPageBackground2.png');
      background-size: 100%;
    }

    .sale-introcution-fourth {
      height: 1988rpx;
      background-image: url($img-base-person + 'GZBuyPageBackground3.png');
      background-size: 100%;
    }

    .sale-introcution-fourth-nostepfour {
      height: 1802rpx;
      background-image: url($img-base-person + 'GZBuyPageBackground3-nostepfour.png');
      background-size: 100%;
    }
  }

  .operation {
    width: 100%;
    height: 10vh;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: row;
    padding: 18rpx 32rpx 30rpx 30rpx;
    background-color: #ffffff;

    .left-button {
      flex-basis: 240rpx;
      height: 80rpx;
      border-radius: 200rpx;
      border: 2rpx solid #ff711e;
      margin-right: 16rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #ff711e;
      font-size: 30rpx;
    }

    .right-button,
    .right-button-solo {
      flex-grow: 1;
      height: 84rpx;
      background-image: url($img-base + 'careerPath/wuhan-buynow2.png');
      background-size: 100% 100%;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      padding: 24rpx 48rpx 20rpx 48rpx;

      span {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: 800;
        font-size: 32rpx;
      }
    }

    .right-button-solo {
      background-image: url($img-base + 'careerPath/wuhan-buynow.png');
    }
  }

  .shopping-operation {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #ffffff;
    height: 10vh;
    position: absolute;
    bottom: 0;
    padding: 0rpx 32rpx 30rpx 30rpx;

    .left {
      padding-top: 10rpx;
      flex-basis: 360rpx;

      .shopping-cart {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        margin-top: -40rpx;

        .chosen {
          color: #888888;
          font-size: 28rpx;

          span {
            color: #ff711e;
            margin: 0 10rpx;
            font-weight: 800;
          }
        }

        .price {
          color: #222222;
          font-size: 30rpx;

          span {
            color: #ff711e;
            font-size: 34rpx;
            font-family: PingFang-SC, PingFang-SC;
          }
        }
      }

      .discount {
        width: 100%;
        margin-top: 10rpx;
        height: 36rpx;
        color: #fb5806;
        line-height: 36rpx;
        text-align: center;
        font-size: 24rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding-left: 10rpx;
      }
    }

    .discount-price {
      color: #fb5806;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
    }

    .right-button {
      flex-grow: 1;
      height: 84rpx;
      background-image: url($img-base + 'careerPath/wuhan-buynow3.png');
      background-size: 100% 100%;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      padding: 24rpx 48rpx 20rpx 48rpx;
      margin-top: -40rpx;

      span {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: 800;
        font-size: 32rpx;
      }
    }
  }

  .popup-info {
    ::v-deep .u-drawer-bottom {
      background-color: #f4f6f8;
    }

    .title {
      font-weight: 800;
      font-size: 36rpx;
      color: #222222;
      padding: 28rpx 32rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .close-button {
        width: 40rpx;
        height: 40rpx;
        padding: 12rpx;
        box-sizing: border-box;
        background-image: url($img-base + 'career/shoppingCarCloseButton.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .choose-service {
      height: 80%;
      border-radius: 16rpx;
      background-color: #ffffff;
      width: calc(100% - 32rpx);
      margin: 0 auto;
      padding: 34rpx 24rpx;
      box-sizing: border-box;
      margin-top: 18rpx;
      box-sizing: border-box;
    }

    .shop {
      margin-bottom: 36rpx;

      .shop-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: 800;
        font-size: 36rpx;
        color: #111111;
      }

      .discount-content {
        margin-top: 10rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        .discounts {
          width: 90rpx;
          height: 40rpx;
          border-radius: 6rpx;
          border: 2rpx solid #fb5806;
          font-weight: 400;
          font-size: 24rpx;
          color: #fb5806;
          margin-left: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .discount-name {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #fb5806;
          margin-left: 20rpx;
        }
      }

      .shop-desc {
        /* margin-left: 60rpx; */
        width: 100%;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;

        span {
          color: #ff711e;
          margin: 0 10rpx;
        }
      }

      .desc-box {
        width: calc(100% - 50rpx);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* padding: 0 50rpx; */
        margin-left: 60rpx;
        margin-top: 12rpx;

        .left-desc {
          flex-basis: 90%;
        }

        .right-arrow {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
          background-image: url($img-base + 'career/right-arrow.png?v=1');
          background-size: 100% 100%;
        }
      }

      .service-item {
        display: flex;
        flex-direction: row;
        /* align-items: center; */
        margin-top: 42rpx;
        box-sizing: border-box;

        .service-picture {
          width: 148rpx;
          height: 148rpx;
          border-radius: 16rpx;
        }

        .right-card {
          display: flex;
          flex-direction: row;
          align-items: top;

          .right-info {
            margin-left: 18rpx;
            width: 450rpx;

            .service-name {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 32rpx;
              color: #333333;
              margin-bottom: 12rpx;
            }

            .service-desc {
              white-space: normal;
              font-weight: 400;
              font-size: 28rpx;
              color: #777777;
              /* margin-top: 12rpx; */
              line-height: 40rpx;
            }

            .special-desc {
              white-space: normal;
              font-weight: 400;
              font-size: 24rpx;
              color: #e02500;
              /* margin-top: 12rpx; */
              line-height: 40rpx;
            }

            .service-price {
              margin-top: 12rpx;
              color: #ff711e;
              /* font-weight: 800; */
              font-family: 'D-DIN-PRO-700-Bold';
              display: flex;
              flex-direction: row;
              align-items: center;

              .old-price {
                margin-left: 10px;
                position: relative;
                padding: 5rpx;
                color: #d29875;

                .line {
                  position: absolute;
                  top: 50%;
                  width: 100%;
                  height: 2rpx;
                  background-color: #af734f;
                }
              }
            }
          }
        }
      }

      .choose-button,
      .choose-sth {
        /* width: 40rpx; d*/
        height: 40rpx;
        border-radius: 32rpx;
        border: 2rpx solid #d3d3d3;
        margin-right: 20rpx;
        flex-basis: 40rpx;
        margin-top: 54rpx;
      }

      .choose-sth {
        background-image: url($img-base-person + 'chooseSth.png');
        background-size: 100%;
      }
    }
  }

  .service-detail {
    ::v-deep .u-drawer-bottom {
      background-color: #f4f6f8;
    }

    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 34rpx;
      justify-content: space-between;

      .top-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .left-arrow {
        width: 28rpx;
        height: 28rpx;
        color: #000000;
        margin-right: 8rpx;
        background-image: url($img-base + 'career/arrow-left-wuhan.png?v=1');
        background-size: 100% 100%;
      }

      .title {
        font-weight: 800;
        font-size: 36rpx;
        color: #222222;
        padding: 28rpx 32rpx 28rpx 12rpx;
      }

      .close-button {
        width: 48rpx;
        height: 48rpx;
        padding: 12rpx;
        box-sizing: border-box;
        background-image: url($img-base + 'career/sharepopupCloseBtn.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .more-detail {
      height: 90%;
      /* border-radius: 16rpx; */
      background-color: #f4f6f8;
      width: calc(100% - 16rpx);
      margin: 0 auto;
      padding: 12rpx 24rpx 34rpx 24rpx;
      box-sizing: border-box;

      .service {
        border-radius: 16rpx;
        width: 100%;
        background-color: #ffffff;
        padding: 28rpx 24rpx;
      }

      .title {
        font-weight: 800;
        font-size: 36rpx;
        color: #222222;
      }

      .service-card {
        margin-top: 16rpx;
        padding: 28rpx 32rpx;
        background-color: #fff5e8;
        border-radius: 6rpx;

        .header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .name {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 32rpx;
            color: #222222;
          }

          .price {
            font-weight: 800;
            font-size: 44rpx;
            color: #ff5e00;
            font-family: 'D-DIN-PRO-700-Bold';
            font-weight: 800;
          }
        }

        .footer {
          font-weight: 400;
          font-size: 28rpx;
          color: #9c8074;
          margin-top: 16rpx;
        }
      }

      .complimentary-detail {
        width: 100%;
        padding: 28rpx 12rpx;

        .complimentary-text {
          color: #666666;
          width: 100%;
          margin-top: 24rpx;

          span {
            white-space: normal;
          }
        }

        .shop-desc {
          /* margin-left: 60rpx; */
          width: 100%;
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;

          span {
            color: #ff711e;
            margin: 0 10rpx;
          }
        }
      }

      .other-service {
        width: 100%;
        padding: 24rpx 32rpx;
        background-color: #eaeced;
        margin-top: 16rpx;
        border-radius: 6rpx;

        .desc {
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          margin-top: 16rpx;
        }
      }
    }
  }
}
</style>
